<template>
  <nav style="position: absolute;">
    <nav :style="nav1">
      <div :style="nav1" style="margin-top: 0">
        <!-- 搜索引擎 -->
        <div :style="divs">
          <img :src="soushuo.src" alt="" style="height: 80%;width: 80%;margin-left: 10px;margin-top: 3px">
        </div>
        <input id="inputsw" type="text"
               @mouseover="handleMouseOver"
               @mouseleave="handleMouseLeave"
               @focus="handleFocus"
               @blur="handleBlur"
               @keyup.enter="inputenter"
               v-model="inputs" >
      </div>
    </nav>
  </nav>

</template>

<script>
export default {
  name: 'InputBox',
  data() {
    return {
      src: " https://cn.bing.com/search?q=",
      isInputFocused: false, // 用于控制input样式的布尔值
      div1: {
        height: "42px",
        width: "42px",
        backgroundColor: "rgba(255, 255, 255, 0.4)",
        filter: "blur(10px)",
        borderRadius: "20px 0px 0px 20px",
        transition: "1s",
      },
      nav: {
        display: "flex",
        width: "100vw",
        justifyContent: "center",
        marginTop: "27vh",

      },
      soushuo: {
        src: require("@/assets/必应.png")
      }
    }
  },
  created() {
    // 获取屏幕高度
    const setNavHeight = () => {
      const winheigth = window.innerHeight;
      // console.log(winheigth);
      if (winheigth<700){
       this.nav.marginTop = "200px"
      }else{
        this.nav.marginTop = "27vh"
      }
    };
    setNavHeight(); // 初始化导航栏高度
    window.addEventListener('resize', setNavHeight); // 监听窗口大小变化事件
  },
  methods: {
    handleFocus() {
      this.isInputFocused = true; // 当输入框获取焦点时，设置布尔值为true
      this.div1.backgroundColor = "rgba(0, 0, 0, 0.7)";
      this.$emit('input-focus'); // 触发自定义事件 input-focus
    },
    handleBlur() {
      this.isInputFocused = false; // 当输入框失去焦点时，设置布尔值为false
      this.div1.backgroundColor = "rgba(255, 255, 255, 0.4)";
      this.$emit('input-blur'); // 触发自定义事件 input-blur
    },
    handleMouseOver() {
      this.div1.backgroundColor = "rgba(13, 17, 18, 0.7)"
    },
    handleMouseLeave() {
      if (this.isInputFocused) {
        this.div1.backgroundColor = "rgba(0, 0, 0, 0.7)";
      } else {
        this.div1.backgroundColor = "rgba(255, 255, 255, 0.4)"
      }

    },
    inputenter() {
      const src = this.src;
      var a = src + this.inputs;
      this.inputs = '';
      document.getElementById('inputsw').value = "";
      window.open(a, '_blank'); // 在新标签页中打开
    }
  },
  computed: {
    divs() {
      return {
        backgroundColor: this.div1.backgroundColor,
        backdropFilter: this.div1.filter,
        width: this.div1.width,
        height: this.div1.height,
        borderRadius: this.div1.borderRadius,
        transition: this.div1.transition,
      }
    },
    nav1() {
      return {
        display: this.nav.display,
        width: this.nav.width,
        justifyContent: this.nav.justifyContent,
        marginTop: this.nav.marginTop,
      }
    }
  }
}
</script>

<style scoped>
input {
  width: 10vw;
  min-width: 200px;
  outline: 0;
  border: 0;
  text-align: center;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  transition-duration: 1s;
  //border-radius: 20px;
  border-radius: 0 20px 20px 0;
  font-size: 2.6vh;
  transition: 1s;
}

input:hover {
  background-color: rgba(13, 17, 18, 0.7);
  width: 35vw;
  color:honeydew;
}

/* 输入框获取焦点时的样式 */
input:focus {
  background-color: rgba(0, 0, 0, 0.7);
  width: 35vw;
  color:white;
}
</style>